<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
    收集表单数据:
        若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
        若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
        若<input type="checkbox"/>
        1.没有配置input的value属性那么收集的就是checked (勾选 or 未勾选，是布尔值)
        2.配置input的value属性:
         (1)v-model的初始值是非数组，那么收集的就是checked (勾选 or 未勾选，是布尔值)
         (2)v-model的初始值是数组，那么收集的的就是value组成的数组
     备注: v-model的三个修饰符:
        lazy:失去焦点再收集数据 number: 输入字符串转为有效的数字 trim: 输入首尾空格过滤-->
    <form @submit.prevent="send">
        <div>账号：<input type="text" v-model="person.account"></div>

        <div>密码：<input type="password" v-model="person.password"></div>

        <div>性别：
            男<input type="radio" name="sex" v-model="person.sex" value="男">
            女<input type="radio" name="sex" v-model="person.sex" value="女">
        </div>

        <div>爱好：
            抽烟<input type="checkbox" value="抽烟" v-model="person.hobby">
            喝酒<input type="checkbox" value="喝酒" v-model="person.hobby">
            玩游戏<input type="checkbox" value="玩游戏" v-model="person.hobby">
        </div>

        <div>
            <span>所属校区</span>
            <select v-model="person.address">
                <option value="">选择校区</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
            </select>
        </div>

        <div>
            <span>其他信息</span>
            <textarea v-model="person.message"></textarea>
        </div>

        <div><input type="checkbox" v-model="person.isOk">接受协议</div>

        <button>提交</button>
    </form>
</div>
<script src="../../javascript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            person:{
                account: "",
                password: "",
                sex:"",
                hobby:[],
                address:"",
                message:"",
                isOk:"",
            }
        },
        methods:{
            send(){
                console.log(JSON.stringify(this.person))
            }
        }
    })
</script>


</body>
</html>
